<template>
  <div id="banner">
    <el-carousel
      class="el-carousel"
      :interval="3000"
      type="card"
      height="200px"
    >
      <el-carousel-item v-for="(item, index) in banners" :key="index">
        <img :src="item.imageUrl" alt="" />
        <div class="tag dynamic1" v-if="item.titleColor === 'red'">
          {{ item.typeTitle }}
        </div>
        <div class="tag dynamic2" v-else>{{ item.typeTitle }}</div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: "Banner",
  components: {},
  props: {
    banners: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {};
  },
  computed: {},
};
</script>

<style scoped>
#banner {
  padding: 0 100px;
}
img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.tag {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 3px 6px;
  font-size: 12px;
  border-radius: 5px;
  color: #eeeeee;
}
.dynamic1 {
  background-color: rgb(204, 74, 74);
}
.dynamic2 {
  background-color: rgb(74, 121, 204);
}
/* 影响歌单列表的层级，故追加了z-index */
.el-carousel {
  z-index: 0;
}
</style>
